<template>
	<div class="container">
		<div style="margin-left: 50px;">
			<el-button type="primary" @click="goback()">上一级</el-button>
		</div>
		<div class="main-wrapper">
			<div class="flex-container">
				<!-- 左侧模板列表 -->
				<div class="template-list">
					<div class="list-header">
						<h2>文案模板</h2>
					</div>
					<div class="list-items">
						<div v-for="(template, index) in templates" :key="index" @click="selectTemplate(template)"
							:class="['list-item', { 'active-template': currentTemplate.id === template.id }]">
							<div class="item-content">
								<i class="el-icon-document"></i>
								<span>{{ template.name }}</span>
							</div>
						</div>
					</div>
				</div>

				<!-- 右侧内容区 -->
				<div class="content-area">
					<!-- 产品卡片 -->
					<div class="product-card">
						<div class="product-header">
							<div class="product-info">
								<div class="product-title">
									<h3>{{ product.name }}</h3>
									<div class="tags">
										<span v-for="(tag, index) in product.tags" :key="index" class="tag">
											{{ tag }}
										</span>
									</div>
								</div>
								<p class="product-description">{{ product.description }}</p>
							</div>
							<div class="product-actions">
								<el-button type="primary" class="round-btn">编辑产品</el-button>
								<el-button class="round-btn">生成文案</el-button>
							</div>
						</div>
					</div>

					<!-- 文案列表区域 -->
					<div class="copywriting-list">
						<div class="list-header">
							<h3>文案列表</h3>
							<!-- <el-button type="primary" class="round-btn">
                <i class="el-icon-plus"></i>新建文案
              </el-button> -->
						</div>

						<div v-if="copywritings.length" class="copy-items">
							<div v-for="(copy, index) in copywritings" :key="index" class="copy-item">
								<div class="copy-header">
									<h4>{{ copy.title }}</h4>
									<div class="copy-actions">
										<el-button type="text" class="icon-btn">
											<i class="el-icon-document-copy"></i>
										</el-button>
										<el-button type="text" class="icon-btn">
											<i class="el-icon-edit"></i>
										</el-button>
									</div>
								</div>
								<p class="copy-content">{{ copy.content }}</p>
							</div>
						</div>

						<div v-else class="empty-state">
							<i class="el-icon-document empty-icon"></i>
							<p class="empty-text">暂无文案，以下为模板示例：</p>
							<div class="template-example">
								{{ currentTemplate.example }}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				templates: [{
						id: 1,
						name: '产品介绍模板',
						example: '【产品名称】是一款【核心功能】的【产品类型】。它采用【技术特点】，能够帮助用户【主要价值】。无论您是【目标用户】，都能通过【产品名称】实现【具体效果】。',
					},
					{
						id: 2,
						name: '促销活动模板',
						example: '限时特惠！【产品名称】超值优惠，原价￥XX，现在仅需￥XX！抢购即送【赠品】，数量有限，先到先得！',
					},
					{
						id: 3,
						name: '功能更新模板',
						example: '【产品名称】重磅更新！新增【功能1】【功能2】【功能3】，带来全新体验。更快、更强大、更易用，马上更新体验吧！',
					},
				],
				currentTemplate: {
					id: 1,
					name: '产品介绍模板',
					example: '【产品名称】是一款【核心功能】的【产品类型】。它采用【技术特点】，能够帮助用户【主要价值】。无论您是【目标用户】，都能通过【产品名称】实现【具体效果】。',
				},
				product: {
					name: '智能写作助手 Pro',
					tags: ['AI写作', '营销文案', '多场景'],
					description: '基于先进的人工智能技术，提供专业的文案创作服务。支持多种行业场景，包括产品描述、营销文案、社交媒体等内容创作。智能分析用户需求，生成高质量、个性化的文案内容。',
				},
				copywritings: [{
						title: '产品主页文案',
						content: '智能写作助手 Pro，您的私人写作专家。采用领先的AI技术，为您提供专业的文案创作服务。无论是产品介绍、营销推广，还是社交媒体内容，都能轻松应对。',
					},
					{
						title: '产品功能介绍',
						content: '支持多场景文案创作，包括电商详情、公众号文章、社交媒体等。智能分析用户需求，快速生成符合场景的优质文案。内置海量模板，让您的创作更加轻松高效。',
					},
				]
			}
		},
		methods: {
			selectTemplate(template) {
				this.currentTemplate = template
			},
			// 返回上一级
			goback() {
				this.$router.go(-1)
			}
		}
	}
</script>

<style>
	/* 基础样式 */
	.container {
		min-height: 100vh;
		width: 100vw;
		background-color: #f9fafb;
	}

	.main-wrapper {
		max-width: 1280px;
		margin: 0 auto;
		padding: 24px 16px;
	}

	.flex-container {
		display: flex;
		gap: 24px;
	}

	/* 左侧模板列表 */
	.template-list {
		width: 256px;
		flex-shrink: 0;
		background: white;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		height: 800px;
		overflow: auto;
	}

	.list-header {
		padding: 16px;
		border-bottom: 1px solid #e5e7eb;
	}

	.list-header h2 {
		font-size: 18px;
		font-weight: 500;
	}

	.list-items {
		padding: 8px 0;
	}

	.list-item {
		padding: 12px 16px;
		cursor: pointer;
		border-left: 4px solid transparent;
	}

	.list-item:hover {
		background: #f3f4f6;
	}

	.active-template {
		background: #eff6ff;
		border-left-color: #3b82f6;
	}

	.item-content {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.item-content span {
		font-size: 14px;
	}

	/* 右侧内容区 */
	.content-area {
		flex: 1;
	}

	.product-card {
		background: white;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		padding: 24px;
		margin-bottom: 24px;
	}

	.product-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.product-title {
		display: flex;
		align-items: center;
		gap: 16px;
		margin-bottom: 16px;
	}

	.product-title h3 {
		font-size: 20px;
		font-weight: 500;
	}

	.tags {
		display: flex;
		gap: 8px;
	}

	.tag {
		padding: 4px 8px;
		font-size: 12px;
		background: #dbeafe;
		color: #2563eb;
		border-radius: 999px;
	}

	.product-description {
		color: #4b5563;
		font-size: 14px;
		line-height: 1.5;
	}

	.product-actions {
		display: flex;
		gap: 8px;
	}

	.round-btn {
		border-radius: 20px !important;
	}

	/* 文案列表 */
	.copywriting-list {
		background: white;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		padding: 24px;
		min-height: 500px;
	}

	.copy-items {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.copy-item {
		padding: 16px;
		border: 1px solid #e5e7eb;
		border-radius: 8px;
	}

	.copy-item:hover {
		background: #f3f4f6;
	}

	.copy-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 8px;
	}

	.copy-actions {
		display: flex;
		gap: 8px;
	}

	.icon-btn {
		padding: 8px !important;
	}

	.copy-content {
		color: #4b5563;
		font-size: 14px;
	}

	/* 空状态 */
	.empty-state {
		height: 400px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #9ca3af;
	}

	.empty-icon {
		font-size: 48px;
		margin-bottom: 16px;
	}

	.empty-text {
		margin-bottom: 8px;
	}

	.template-example {
		max-width: 640px;
		font-size: 14px;
		text-align: center;
		line-height: 1.5;
	}
</style>